import * as React from 'react';
import styles from './index.less';
import loginBg from '../../images/bj.png';
import loginLogo from '../../images/logo.png';
import { Button, Col, Form, Input, message, Row, Radio } from 'antd';
import {
  CodepenOutlined,
  IdcardOutlined,
  TeamOutlined,
} from '@ant-design/icons';
import request from '../../http';
import { history } from 'umi';
import SecurityService from '../../service/securityService';

const layout = {
  labelCol: { span: 0 },
  wrapperCol: { span: 24 },
};

export default () => {
  const [formObject] = Form.useForm();
  const [captchaUrl, setCaptchaUrl] = React.useState('');
  const [captchaNo, setCaptchaNo] = React.useState<any>();
  // const updateCaptcha = async () => {
  //   const result: any = await request.get('/getCodeId');
  //   setCaptchaNo(result.date)
  //   console.log(result.date)
  //   // console.log(captchaNo)
  //   // console.log((Math.random()*100));
  //   setCaptchaUrl(`http://10.8.21.238:8082/getKaptcha?id=${result.date}`)
  // };

  // React.useEffect(() => {
  //   updateCaptcha().then();

  // }, []);

  const doLogin = async () => {
    const data = await formObject.validateFields();
    console.log(data);
    const result: any = await request.post('/user/login', {
      ...data,
      codeId: captchaNo,
    });
    if (result.code == '200') {
      SecurityService.saveSecurity({ token: result.date });
      console.log(SecurityService.getSecurity());
      console.log(result.date);
      if (data.roleType === 0) {
        history.push('/Student/index');
      } else {
        if (data.roleType === 1) {
          history.push('/Teacher/Course');
        } else {
          history.push('/Admin/index');
        }
      }
    } else {
      message.error(result.message);
    }
  };

  return (
    <div className={styles.loginMain}>
      <img src={loginBg} className={styles.loginBg} />
      <div className={styles.loginContent}>
        <div className={styles.loginLogo}>
          <img src={loginLogo} />
        </div>
        <p className={styles.loginTitle}>学生实训考勤管理系统</p>
        <div className={styles.loginForm}>
          <Form {...layout} name="loginForm" form={formObject} preserve={false}>
            <Form.Item
              name="userNo"
              rules={[
                { required: true, whitespace: true, message: '账户不能为空!' },
                { max: 30, message: '最大长度不能超过30!' },
              ]}
            >
              <Input prefix={<TeamOutlined />} placeholder="账户" />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[
                { required: true, whitespace: true, message: '密码不能为空!' },
                { max: 30, message: '最大长度不能超过30!' },
              ]}
              style={{ marginBottom: 24 }}
            >
              <Input.Password prefix={<IdcardOutlined />} placeholder="密码" />
            </Form.Item>
            <Form.Item
              name={'roleType'}
              rules={[{ required: true, message: '请选择用户类型' }]}
              style={{ clear: 'both' }}
              initialValue={'student'}
            >
              <Radio.Group>
                <Radio value={0}>学生</Radio>
                <Radio value={1}>老师</Radio>
                <Radio value={2}>管理员</Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item
              name="code"
              rules={[
                {
                  required: true,
                  whitespace: true,
                  message: '验证码不能为空!',
                },
                { max: 30, message: '最大长度不能超过30!' },
              ]}
              style={{ marginBottom: 24 }}
            >
              <Row gutter={8}>
                <Col span={17}>
                  <Input prefix={<CodepenOutlined />} placeholder="验证码" />
                </Col>
                <Col span={5}>
                  {/* <img
                    className={styles.captchaImg}
                    src={captchaUrl}
                    onClick={updateCaptcha}
                  /> */}
                </Col>
              </Row>
            </Form.Item>
            <Form.Item style={{ marginBottom: 24 }}>
              <Row gutter={8}>
                <Col span={17}>
                  <Button
                    type={'primary'}
                    style={{ width: '100%' }}
                    onClick={doLogin}
                  >
                    登录
                  </Button>
                </Col>
                <Col span={5}>
                  <Button
                    type={'link'}
                    onClick={() => {
                      alert('请联系管理员修改密码！');
                    }}
                  >
                    忘记密码
                  </Button>
                </Col>
              </Row>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  );
};
